<template>
	<view>
		<image src="/static/login-bg.png" mode="widthFix"></image>
		<!-- 在微信之中获取手机号 -->
		<view class="btns">
			<button type="primary" open-type="getPhoneNumber" @getphonenumber="login" :loading="buttonLoading">微信登录</button>
			<button type="primary" @click="loginPhone" :loading="buttonLoadingPhone">手机号登录</button>
		</view>
		
	</view>
</template>

<script setup>
import { requestPostJson } from '@/api/request';
import { ref, onMounted } from 'vue';
// 页面进入时自动检测token并校验
onMounted(async () => {
	console.log("页面进入时自动检测token并校验");
	// 先从本地存储获取token
	const token = uni.getStorageSync('token');
	if (!token) {
		// 没有token，停留在当前页面
		return;
	}
	
	// 有token，请求校验接口
	try {
		const res = await requestPostJson('/login/checktoken', { token });
		if (res && res.code === 0) {
			// 校验通过，跳转首页
			uni.switchTab({ url: '/pages/index/index' });
		}
		// code不为0则停留在当前页面
	} catch (err) {
		// 请求异常也停留在当前页面
		console.log('token校验失败:', err);
	}
});

const buttonLoading = ref(false); // 按钮的 loading 状态
	
// 微信登录 - 使用微信绑定的手机号
// login 中有await, 所以必须加上 async
const login = async (event) => {
	console.log(event);
	// 先让button开始loading
	buttonLoading.value = true;

	// 调用异步方法 requestPostJson(一个Promise对象)
	// 既然是异步方法，我们要么调用 then() 或者 catch() 方法进行异步等待，要么使用 await 异步等待
	const res = await requestPostJson("/login/login", {"code": event.detail.code, "encryptedData": event.detail.encryptedData, "iv": event.detail.iv})
		.then(res => {
			return res;
		})
		.catch(err => {
			console.log(err);
			uni.showToast({
				title: err,
				duration: 2000,
				icon: 'error'
			});
			return null;
		});

	buttonLoading.value = false;
	if (!res) {
		return;
	}
	// 异常校验
	// 业务处理码异常
	if (res.code != 0) {
		uni.showToast({
			title: res.msg,
			duration: 2000,
			icon: 'error'
		});
		return;
	}
	// 数据异常
	if (!res.data || !res.data.token) {
		uni.showToast({
			title: '登录失败，服务器异常',
			duration: 2000,
			icon: 'error'
		});
		return;
	}

	// 登录成功，跳转到首页
	// 提示登录成功
	uni.showToast({
		title: '登录成功',
		duration: 2000
	});
	// 将token存储到本地
	uni.setStorageSync('token', res.data.token);
	// 跳转到首页
	uni.navigateTo({
		url: '/pages/index/index'
	});
}

// 手机号登录
const buttonLoadingPhone = ref(false); // 按钮的 loading 状态
const loginPhone = async () => {
	buttonLoadingPhone.value = true;
	uni.showToast({
		title: '暂不支持该登录方式',
		duration: 2000
	});
}
</script>

<style scoped>
/* 让image成为页面的背景图片，让button在页面的最上方最中间 */
image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 保持图片的宽高比，裁剪图片以适应容器 */
}

/* 让btns容器成为一个flex布局，水平垂直居中, 同时其内部的两个button可以并排展示 */
.btns {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	flex-direction: column; /* 让子元素垂直排列 */
	width: 80%; /* 宽度为屏幕的80% */
}

/* 让btns容器内的button宽度为100%，同时两个之间的上下间距为20rpx */
.btns button {
	width: 100%;
	margin: 10rpx 0; /* 上下间距为10rpx */
}

</style>